<template>
  <biz-form-remote-select
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :value="selectValue"
    cleared
    @input="updateSelectValue"
  >
    <div class="customer-item" slot="option" slot-scope="{ option }">
      <h3>{{ option.label }}</h3>
      <p>
        <span>
          <label>{{$t('common.base.phone')}}：</label>
          <span>{{ option.lmPhone }}</span>
        </span>
        <span>
          <label>{{$t('common.label.serialNumber')}}：</label>
          <span>{{ option.serialNumber }}</span>
        </span>
      </p>
    </div>
  </biz-form-remote-select>
</template>

<script>
import { t } from '@src/locales';
export default {
  name: 'search-customer-select',
  props: {
    placeholder: {
      type: String,
      default: t('common.placeholder.selectCustomer')
    },
    remoteMethod: {
      type: Function
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectValue: this.value.slice()
    };
  },
  watch: {
    value(newValue) {
      this.selectValue = newValue.slice();
    }
  },
  methods: {
    updateSelectValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>

<style lang="scss">
.customer-item {
  h3 {
    font-size: 14px;
    margin: 0;
  }

  p {
    display: flex;
    margin: 0;

    span {
      label {
        display: inline-block;
        width: auto;
      }

      span {
        margin-right: 10px;
      }
    }
  }
}
::v-deep .el-input--small .el-input__inner {
  line-height: 0 !important;
}
</style>
